<template>
    <ul class="ul-wrap">
      <li class="item-li"
      v-on:mouseenter="mousenterFn"
      @mouseleave="mouseleaveFn"
      :style="{backgroundColor:bgColor,color:fontColor}">
        <input type="checkbox" name="item" id="" class="checkItem" v-model="checked">
        <div class="item-text">{{todoItem.name}}</div>
        <button class="delete-btn" v-show="isShow" @click="deleteItem">delete</button>
      </li>
    </ul>
</template>

<script lang="ts">
import { defineComponent, ref, inject, computed} from 'vue';

export default defineComponent({
  name: 'item',
  props: {
    todoItem: {
      type: Object,
      required: true,
    },
    deleteTodo: {
      type: Function,
      required: true,
    },
    updateTodo: {
      type:Function,
      required: true,
    }
  },
  setup(props) {
    let isShow = ref(false);
    let bgColor = ref('white');
    let fontColor = ref('black');
    let checked = computed({
      set(val) {
        props.updateTodo(props.todoItem.id);
      },
      get() {
        return props.todoItem.checked
      }
    })
    let mousenterFn = function() {
      isShow.value = true;
      bgColor.value = 'pink';
      fontColor.value = 'white';
    }
    let mouseleaveFn = function() {
      isShow.value = false;
      bgColor.value = 'white';
      fontColor.value = 'black';
    }
    // let deleteTodo = inject('deleteTodo');
    let deleteItem = function () {
      props.deleteTodo(props.todoItem.id);
    }
    return {
      isShow,
      bgColor,
      fontColor,
      checked,
      mousenterFn,
      mouseleaveFn,
      deleteItem,
    }
  }
});
</script>
<style scoped>
.ul-wrap {
  width: 100%;
  /* border: 1px solid rgb(7, 192, 106); */
}
.item-li {
  width: 90%;
  height: 30px;
  padding: 5px 5%;
  background-color: rgb(255, 255, 255);
  margin-top: 5px;
  border-radius: 5px;
  text-align: left;
  line-height: 30px;
  font-size: 14px;
  position: relative;
  border: 1px solid rgb(131, 131, 131);
}
.checkItem {
  display: inline-block;
  margin-right: 20px;
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
}
.item-text {
  display: inline-block;
}
.delete-btn {
  position: absolute;
  right: 10px;
  top: 5px;
  background-color: orange;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  width: 50px;
  height: 25px;
  border: none;
}
</style>
